<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<%--
  Created by IntelliJ IDEA.
  User: fzy-2
  Date: 2021/4/16
  Time: 20:12
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<% String path = request.getContextPath(); %>
<html>
<head>
    <meta charset="utf-8">
    <title>上机考试系统</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- le styles -->
    <link href="<%=path%>/css/bootstrap.css" rel="stylesheet">
    <link href="<%=path%>/css/bootstrap-datetimepicker.css" rel="stylesheet">
    <link href="<%=path%>/css/exam.css" rel="stylesheet">
    <style>
        body {
            padding-top: 60px;
            /* 60px to make the container go all the way to the bottom of the topbar */
        }
    </style>
    <link href="<%=path%>/css/bootstrap-responsive.css" rel="stylesheet">

    <!-- le html5 shim, for ie6-8 support of html5 elements -->
    <!--[if lt ie 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
</head>

<body>

<%@ include file="/WEB-INF/pages/Teacher/teacher_header.jsp"%>

<div class="container">
    <h1>
        <img src="<%=path%>/img/exam-teacher.png"  alt=""/> 上机考试管理
    </h1>

    <form class="exam-form form-inline" action="${pageContext.request.contextPath}/teacher_exam_add" enctype="multipart/form-data">
        <h4>添加考试</h4>
        <label>
            <input type="text" name="ename" placeholder="考试名称*" size="20" />
        </label>
        <div class="controls input-append date" id="datetimepicker" data-link-field="etime" >
            <label>
                <input class="span2" size="16" type="text"  placeholder="考试时间*" readonly/>
            </label>
            <span class="add-on"><i class="icon-remove"></i></span>
            <span class="add-on"><i class="icon-th"></i></span>
        </div>
        <input type="hidden" id="etime" name="etime" value="" />
        <input type="hidden" name="eautostart" value="false">
        <label>
            <input type="checkbox" name="eautostart" value="true"/>
        </label> 自动开始&nbsp;
        <input type="submit" class="btn btn-primary" value="添加" />
    </form>

    <table class="table table-striped table-bordered">
        <thead>
        <tr>
            <th class="span3">考试名称</th>
            <th class="span3">考试时间</th>
            <th>创建人</th>
            <th>上传试卷</th>
            <th>自动开始</th>
            <th>进行中</th>
            <th>已结束</th>
            <th>已归档</th>
            <th>已清理</th>
            <th>&nbsp;</th>
        </tr>
        </thead>
        <tbody>
        <c:forEach items="${exams}" var="exam">
            <tr>
                <th class="span3">${exam.name}</th>
                <th class="span3">${exam.starttime}</th>
                <th class="span4">${exam.creator}</th>
                <th class="span4">${exam.exampaper}</th>
                <th class="span4"><label>
                    <c:if test="${exam.autostart == true}">
                        <input type="checkbox" checked="checked" disabled/>
                    </c:if>
                    <c:if test="${exam.autostart == false}">
                        <input type="checkbox" disabled/>
                    </c:if>
                </label></th>
                <th class="span4"><label>
                    <c:if test="${exam.underway == true}">
                        <input type="checkbox" checked="checked" disabled/>
                    </c:if>
                    <c:if test="${exam.underway == false}">
                        <input type="checkbox" disabled/>
                    </c:if>
                </label></th>
                <th class="span4"><label>
                    <c:if test="${exam.finished == true}">
                        <input type="checkbox" checked="checked" disabled/>
                    </c:if>
                    <c:if test="${exam.finished == false}">
                        <input type="checkbox" disabled/>
                    </c:if>
                </label></th>
                <th class="span4"><label>
                    <c:if test="${exam.archived == true}">
                        <input type="checkbox" checked="checked" disabled/>
                    </c:if>
                    <c:if test="${exam.archived == false}">
                        <input type="checkbox" disabled/>
                    </c:if>
                </label></th>
                <th class="span4"><label>
                    <c:if test="${exam.cleaned == true}">
                        <input type="checkbox" checked="checked" disabled/>
                    </c:if>
                    <c:if test="${exam.cleaned == false}">
                        <input type="checkbox" disabled/>
                    </c:if>
                </label></th>
                <th class="span2">
                    <button class="btn btn-primary edit">编辑</button>
                </th>
                <th class="span2">
                    <input class="examId" name="input" type="hidden" value="${exam.id}"/>
                    <button class="btn btn-primary delete">删除</button>
                </th>
            </tr>
        </c:forEach>
        </tbody>
    </table>
</div>
<!-- /container -->
<!-- placed at the end of the document so the pages load faster -->
<script src="<%=path%>/js/jquery.min.js"></script>
<script src="<%=path%>/js/bootstrap.min.js"></script>
<script>
    const deleteBtn = $(".delete");
    const editBtn = $(".edit");
    const examId = $(".examId");
    for (let i = 0; i < editBtn.length; i++) {
        editBtn[i].addEventListener("click", function () {
            let a = document.createElement("a");
            a.href = "${pageContext.request.contextPath}/teacher_exam_update?id=" + $(examId[i]).val();
            a.click();
        })
    }
    for (let i = 0; i < deleteBtn.length; i++) {
        deleteBtn[i].addEventListener("click", function () {
            console.log($(examId[i]).val())
            $.ajax({
                type: "POST",
                url: "${pageContext.request.contextPath}/teacher_exam_delete",
                data: {id: $(examId[i]).val()},
                success: function () {},
                error: function (e) {
                    console.log(e);
                }
            })
        })
    }
</script>
<script src="<%=path%>/js/bootstrap-datetimepicker.js"></script>
<script src="<%=path%>/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
</body>
</html>
<script type="text/javascript">
    $("#datetimepicker").datetimepicker({
        format: "yyyy-mm-dd hh:ii",
        autoclose: true,
        todayBtn: true,
        minuteStep: 10,
        minView:0,
        pickerPosition:'bottom-left',
        language:'zh-CN'
    });
</script>